<template>
  <!--    时间轴-->
  <div style="background: #ffffff">
    <el-row :style="{ '--theme': $store.getters.themeColor }">
      <span class="title-class" style="margin-left: 24px"
        ><div class="title">
          <span class="icon"></span><span class="title-name">时间轴</span>
        </div></span
      >
    </el-row>
    <el-row>
      <div
        class="portlet"
        :style="{ height: eChartsHeight, width: eChartsWidth }"
      >
        <div class="portlet-body" style="height: 100%">
          <div id="chartsDom" style="height: 100%">
            <div id="charts" style="width: 100%; height: 90%"></div>
          </div>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { DateFormat } from "@/utils/public";
import { getTimeAxis } from "@/api/modules/eventManagement/eventDetailAll/eventDetailAll";
export default {
  name: "timerShaft",
  props: {
    eChartsWidth: {
      type: String,
      default: "600px",
    },
    eChartsHeight: {
      type: String,
      default: "600px",
    },
    orderId: {
      //视图数据源
      type: String,
      default: [],
    },
  },
  data() {
    return {
      reportData: [],
      emHandleOrgVO: [],
    };
  },
  methods: {
    timeStr(str) {
      return DateFormat.utcTimeToStrTime(str);
    },
    initeCharts() {
      let _this = this;
      _this.reportDatas = [];
      getTimeAxis(_this.orderId).then((res) => {
        if (result.resultStat === "SUCCESS") {
          _this.reportDatas = result.data;
          _this.initData();
        }
      });
      // $v.get(_this, urlEvent + '/alarm/order/getTimeAxis/'+_this.orderId, "", function (result) {
      //     if (result.resultStat === "SUCCESS") {
      //       _this.reportDatas = result.data;
      //       _this.initData();
      //     }
      //   }
      // )
    },
    initData() {
      let _this = this;
      let reportData = [];
      let emHandleOrgVO = [];
      for (let i = 0; i < _this.reportDatas.length; i++) {
        let item = _this.reportDatas[i];
        reportData.push({
          axisY: i + 1,
          duration: item.duration,
          operDateFormat: _this.timeStr(item.task_oper_date),
          organizationId: item.source_identity_id,
          processingType: item.show_name,
          step: i + 1,
        });
      }
      for (let i = 0; i < _this.reportDatas.length; i++) {
        let item = _this.reportDatas[i];
        emHandleOrgVO.push({
          axisY: i + 1,
          organizationId: item.source_identity_id,
          organizationName: item.show_name,
        });
      }
      let departments = {};
      for (let i = 0; i < emHandleOrgVO.length; i++) {
        let key = i + 1;
        departments[key] = emHandleOrgVO[i].organizationName;
      }

      var myChart = echarts.init(document.getElementById("charts"));
      var steps = reportData.map(function (item, index) {
        return item.step;
      });
      var colorAll = {
        1: "#8A2BE2",
        2: "#00BFFF",
        3: "yellow",
        4: "#98FB98",
        5: "aqua",
        6: "fuchsia",
      };

      var lineColors = {
        1: "red",
        2: "#FF7F50",
        3: "green",
      };
      var option = (option = {
        backgroundColor: "#FFFFFF",
        title: {
          text: "时间轴",
          left: "center",
          top: "top",
          textStyle: { color: "white" },
        },

        //工具框，可以选择
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          // axisLabel: {
          //   show: false,
          //   interval: 0,
          //   color: '#B4BDC5',
          // },
          boundaryGap: false,
          axisLine: {
            onZero: false,
            lineStyle: {
              color: "#B4BDC5",
              width: 2,
            },
          },
          type: "value",
          data: steps,
          nameTextStyle: {
            fontSize: 1,
          },
          interval: 1,
          // splitLine: {
          //   lineStyle: {
          //     color: 'gray',
          //     type: 'dotted'
          //   }
          // }
          splitLine: {
            show: false,
          },
        },
        grid: {
          left: 140,
        },
        yAxis: {
          min: 0,
          max: emHandleOrgVO.length + 1,
          type: "value",
          inverse: true,
          data: [],
          axisTick: { interval: 0, show: false },
          axisLine: { show: false },
          // axisLine: {
          //   onZero: false,
          //   lineStyle: {
          //     color: '#B4BDC5',
          //     width: 2
          //   }
          // },
          axisLabel: {
            margin: 6,
            show: true,
            fontWeight: "bold",
            color: "#B4BDC5",
            // 这里重新定义就可以
            formatter: function (value) {
              var texts = [];
              texts.push(departments[value]);
              return texts;
            },
          },
          nameTextStyle: {
            color: "white",
          },
          splitLine: {
            lineStyle: {
              color: "#B4BDC5",
              type: "dotted",
              width: "2",
            },
          },
        },
        series: [],
      });
      var lineXY = []; // 坐标集合
      var xy = []; // y轴集合
      var xx = []; // x轴集合
      var durations = []; // 处理时长集合
      var shang = 0;
      var operHours = []; //部门执行时长集合

      durations = reportData.map(function (item, index) {
        return item.duration;
      });
      xx = reportData.map(function (item, index) {
        return item.step;
      });
      xy = reportData.map(function (item, index) {
        return item.step;
      });
      // console.log("xy数组："+ xy)
      // console.log("xx数组："+ xx)
      lineXY = reportData.map(function (item) {
        return {
          value: [item.step, item.axisY],
        };
      });

      // operHours = reportData.map(function (item, index) {
      //   return item.operHour;
      // });

      for (var i = 0; i < lineXY.length; i++) {
        // 部门经办流程折线初始化
        option.series[i] = {
          name: "",
          type: "line",
          symbol: "circle",
          symbolSize: 10,
          itemStyle: {
            normal: {
              color: "", //动态设置，拐点边框颜色
              borderColor: "", //动态设置，拐点边框颜色
            },
          },
          lineStyle: {
            width: 1,
          },
          data: [],
          markPoint: {
            label: {
              show: true,
              position: "right",
            },
            symbolSize: 1, // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: "{b}",
                  color: "white",
                  fontSize: 12,
                },
              },
            },
            data: [
              {
                type: "max",
                valueIndex: 0,
                coord: [], // 动态设置，拐点的坐标
                name: "", // 动态设置，拐点显示的文本
              },
            ],
          },
        };

        // var operHour = operHours[i + 1];
        // var lineColor;
        // if (operHour < 0) {
        //   lineColor = lineColors[1];
        // } else if (operHour < 24) {
        //   lineColor = lineColors[2];
        // } else {
        //   lineColor = lineColors[3]
        // }
        var lineColor = lineColors[3];
        // 经办时间段横线初始化
        option.series[i + lineXY.length] = {
          type: "line",
          itemStyle: {
            normal: {
              color: lineColor,
              borderColor: lineColor, //拐点边框颜色
            },
          },
          symbol: "circle",
          symbolSize: 1,
          data: [],
          markPoint: {
            label: {
              show: true,
              position: "right",
            },
            symbolSize: 1, // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: "{b}",
                  fontSize: 12,
                },
              },
            },
            data: [
              {
                type: "max",
                valueIndex: 0,
                coord: [], // 动态设置，时间段的坐标,取中点
                name: "", // 动态设置，时间段显示的文本
              },
            ],
          },
        };

        if (reportData.length >= i + 2) {
          option.series[i].data = lineXY.slice(i, i + 2);
        } else {
          option.series[i].data = lineXY.slice(i, i + 1);
        }

        var colorShow = colorAll[1];
        /**
         * 折线参数赋值
         */
        option.series[i].markPoint.data = reportData
          .map(function (item) {
            var position = "bottom";
            //colorShow = colorAll[item.organizationId];
            if (shang == 0) {
              position = "top";
            } else {
              position = "bottom";
            }
            return {
              type: "max",
              valueIndex: 0,
              coord: [item.step, item.axisY],
              // name: item.processingType + '\n' + item.operDateFormat,
              // label: {
              //   position: position,
              //   color:"red"
              // },
              label: {
                show: true,
                position: "top",
                formatter:
                  "{per|" +
                  (item.processingType + "\n" + item.operDateFormat) +
                  "}",
                color: "#ee6666",
                backgroundColor: "#F6F8FC",
                rich: {
                  per: {
                    padding: [0, 15],
                    align: "left",
                    width: 166.98,
                    height: 32,
                    fontSize: 14,
                    fontFamily: " PingFangSC-Regular, PingFang SC",
                    fontWeight: 400,
                    color: "#FFFFFF",
                    lineHeight: 32,
                    backgroundColor: "#4C5058",
                    // borderRadius: 11
                  },
                },
              },
            };
          })
          .slice(i, i + 1);
        colorShow = colorAll[xy[i]];
        option.series[i].itemStyle.normal.color = colorShow;
        option.series[i].itemStyle.normal.borderColor = colorShow;

        /**
         * 横线参数赋值
         */
        var yy = "";
        var h = 0.2; // 横线与高低点间距
        var y1 = xy[i]; // 前一个y值
        var y2 = xy[i + 1]; //后一个y值
        var temp = "";
        if (y1 - h < 0 || y2 - h < 0) {
          if (y1 > y2) {
            temp = y1;
          } else {
            temp = y2;
          }
          yy = temp + h;
          shang = 1;
          var arr = [];
          arr.push({ value: [xx[i], yy] });
          arr.push({ value: [xx[i + 1], yy] });
          option.series[i + lineXY.length].data = arr;
          continue;
        }
        if (y1 + h > 7 || y2 + h > 7) {
          if (y1 > y2) {
            temp = y2;
          } else {
            temp = y1;
          }
          yy = temp - h;
          shang = 0;
          var arr = [];
          arr.push({ value: [xx[i], yy - h] });
          arr.push({ value: [xx[i + 1], yy - h] });
          option.series[i + lineXY.length].data = arr;
          option.series[i + lineXY.length].markPoint.data = [
            {
              type: "max",
              valueIndex: 0,
              coord: [(xx[i] + xx[i + 1]) / 2, yy - h * 1.5],
              name: durations[i + 1],
            },
          ];
          continue;
        }
        // if (y2 == null) {
        //   break
        // }
        // if (shang == 1) {
        //   if (y1 > y2) {
        //     temp = y2
        //   } else {
        //     temp = y1
        //   }
        //   yy = temp - h
        //   shang = 0
        //   var arr = []
        //   arr.push({ value: [xx[i], yy - h] })
        //   arr.push({ value: [xx[i + 1], yy - h] })
        //   // option.series[i + lineXY.length].data = arr
        //   // option.series[i + lineXY.length].markPoint.data = [
        //   //   {
        //   //     type: 'max',
        //   //     valueIndex: 0,
        //   //     coord: [(xx[i] + xx[i + 1]) / 2, yy - h * 1.5],
        //   //     name: durations[i + 1]
        //   //   }
        //   // ]
        //   continue
        // }
        // if (shang == 0) {
        //
        //   if (y1 > y2) {
        //     temp = y1
        //   } else {
        //     temp = y2
        //   }
        //   yy = temp + h
        //   shang = 1
        //   var arr = []
        //   arr.push({ value: [xx[i], yy + h] })
        //   arr.push({ value: [xx[i + 1], yy + h] })
        //   // option.series[i + lineXY.length].data = arr
        //   // option.series[i + lineXY.length].markPoint.data = [
        //   //   {
        //   //     type: 'max',
        //   //     valueIndex: 0,
        //   //     coord: [(xx[i] + xx[i + 1]) / 2, yy + h * 1.5],
        //   //     name: durations[i + 1]
        //   //   }
        //   // ]
        //   continue
        // }
      }
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
$theme: var(--theme);
#main {
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0px 10px 12px 3px rgba(213, 210, 233, 0.55);
  border-radius: 8px;
  padding: 20px;
}

#chartsDom i {
  width: 54px;
  height: 6px;
  display: inline-block;
  margin-right: 10px;
  background: green;
  margin-bottom: 3px;
  border-radius: 2px;
}

#chartsDom .legend_2 {
  background: #ff7f50;
}

#chartsDom .legend_3 {
  background: red;
}
.title-class {
  display: inline-block;
}

.title {
  height: 3vh;
  background: $theme;
  border-radius: 17px;
  margin-top: 1vh;
  /*margin-left: 3vh;*/
  display: flex;
  align-items: center;
}
.icon {
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-radius: 50%;
  margin-left: 1vh;
  margin-right: 1vh;
}
.title-name {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 22px;
  margin-right: 2vh;
}
</style>
